<template>
  <div ref="mgrDialog" class="dialog-wrap">
    
    <el-dialog 
      :title="headerTitle" 
      width="70%" 
      :visible.sync="DialogVisible"
      @close="dialogClose"
    >
      
      <el-row :gutter="20">
        <el-form 
          ref="dialogForm"
          v-if = "editForm != null"
          size="mini"
          :rules="rules"
          :label-width="formLabelWidth"
          :model.sync="editForm">


          <el-col :span="12">
            <el-form-item label="账号" prop="account">
                  <el-input v-model="editForm.account" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="12"> 
              <el-form-item label="密码" prop="password">
                  <el-input v-model="editForm.password" type="password" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="12"> 
              <el-form-item label="姓名" prop="name">
                  <el-input v-model="editForm.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12"> 
              <el-form-item label="部门" prop="deptId">
                 
                <input-tree
                  class="width-full"
                  v-model="editForm.deptId"
                  :name="editForm.deptName"
                  :data="deptIds"
                  :props="deptTreeProps"
                  node-key="id"
                  node-name="name"
                  @selected="deptSelect"
                ></input-tree>

              </el-form-item>
            </el-col>


            <el-col :span="12"> 
              <el-form-item label="职位" prop="positionIds">
                  
                <el-select class="with-full" v-model="editForm.positionIds" multiple placeholder="请选择">
                  <el-option
                    v-for="item in positionIds"
                    :key="item.positionId"
                    :label="item.name"
                    :value="item.positionId">
                  </el-option>
              </el-select>

              </el-form-item>
            </el-col>
            
            <el-col :span="12"> 
              <el-form-item label="电话" prop="phone">
                  <el-input v-model="editForm.phone" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="12"> 
              <el-form-item label="电子邮箱">
                  <el-input v-model="editForm.email" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="12"> 
              <el-form-item label="用户生日" prop="birthday">
                  
                <el-date-picker
                   class="with-full"
                  v-model="editForm.birthday"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>

              </el-form-item>
            </el-col>
            
            <el-col :span="12"> 
              <el-form-item label="用户性别" prop="sex">

                  <el-select class="with-full" v-model="editForm.sex" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in sexes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>

              </el-form-item>
            </el-col>

            <el-col :span="12"> 
              <el-form-item label="用户状态">

                  <el-switch
                    v-model="editForm.$status"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>

              </el-form-item>
            </el-col>   
        </el-form>
      </el-row>
      
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="confirm">确认</el-button>
          <el-button size="mini" type="danger" @click="cancel">取消</el-button>
      </div>  
    </el-dialog>

  </div>
</template>


<script>
import { deepClone, convertDataToTree } from "@/utils/util"
import {
  listPositions,
  dept
} from "@/api/admin/mgr"; 

import InputTree from "@/components/InputTree"

export default{
  props:{
    //新增还是编辑
    type:{
      type:[Number,String],
      defalut:1
    },
    visible:{
      type:Boolean,
      default:false
    },
    form:{
      type:Object,
      default:{
        account:'',
        password:'',
        name:'',
        deptId:'',
        positionIds:[],
        phone:'',
        email:'',
        sex:'',

      }
    },
    
  },
  watch:{
    visible(val){
      this.DialogVisible = val;
    },
    form(newVal,oldVal){

      console.log("-----mgrEditDialog--watch---form---------")
      console.log(newVal)
      if(newVal != null){
        this.editForm = newVal;
      }else{
        this.editForm = this.defaultForm;
      }
      
    },
    type(newVal,oldVal){
      if(newVal == 1){
        this.headerTitle = "添加用户"
      }else if(newVal == 2){
        this.headerTitle = "修改用户"
      }
    }
  },
  components:{
    InputTree
  },
  data(){
    return{
      DialogVisible:false,
      //头部标题
      headerTitle:"添加用户",
      defaultForm:{
        account:'',
        password:'',
        name:'',
        deptId:'',
        deptName:'',
        positionIds:'',
        phone:'',
        email:'',
        birthday:'',
        sex:'',
        status:'ENABLE',
        $status:true
      },
      editForm:this.defaultForm,

      //验证规则
      rules:{
        account:[{required:true,message:"请输入账号",trigger:"blur"}],
        password:[{required:true,message:"请输入密码",trigger:"blur"}],
        name:[{required:true,message:"请输入姓名",trigger:"blur"}],
        deptId:[{required:true,message:"请选择部门",trigger:"click"}],
        positionIds:[{required:true,message:"请选择职位",trigger:"click"}],
        phone:[{required:true,message:"请输入电话",trigger:"blur"}],
        birthday:[{required:true,message:"请输入用户生日",trigger:"blur"}],
        sex:[{required:true,message:"请选择性别",trigger:"blur"}],
      },
      formLabelWidth:'100px',
      positionIds:[],
      deptIds:[],
      sexes: [
        {
          label: "男",
          value: 'M'
        },
        {
          label: "女",
          value: 'W'
        }
      ],
      deptTreeProps:{
        children: 'childrenNodes',
        label: 'name',
        value: 'id'
      }
    }
  },
  mounted(){
    console.log("----dialog/mgrEditDialog-----mounted------------")
    //获取职位列表
    this.getPosition();
    //获取部分列表
    this.getDept();
  },
  methods:{
    //转换开关返回数值
    reverseStatus(val){
      if(val == 'ENABLE'){
        return true
      }else{
        return false
      }
    },
    dialogClose(){
      this.cancel();
    },
    //获取职位列表
    getPosition(){
      listPositions().then((res)=>{
        console.log("----dialog/mgrEditDialog-----getPosition------")
        console.log(res)
        var result = res.data.data;
        //将职位id转换为字符串
        for(let i=0;i<result.length;i++){
          result[i].positionId = result[i].positionId+'';
        }
        this.positionIds = result;
      })
    },
    //获取部门列表
    getDept(){
      dept().then((res)=>{
        this.deptIds = this.convertDataToTree(res.data);
      })
    },
    convertDataToTree(data){
      return convertDataToTree(data)
    },
    //选择部门
    deptSelect(data){
      this.editForm.deptId = data.id;
      this.editForm.deptName = data.name;
    },
    //取消按钮
    cancel(){
      this.DialogVisible = false;
      this.$emit('cancel')
    },
    confirm(){

      this.$refs.dialogForm.validate((valid)=>{
        if (valid) {
          
          var send = deepClone(this.editForm);
          delete send.updateTime;
          delete send.createTime;
          send["position"] = send.positionIds.join(',');
          delete send.positionIds;
          if(send["$status"]){
            send["status"] = 'ENABLE'
          }else{
            send["status"] = 'LOCKED'
          }
          console.log(send)

          this.$emit('confirm',{type:this.type,data:send});

          this.DialogVisible = false;
        } else {
           
            return false;
        }

      })

    }

  }
}


</script>
